<template>
  <div class="full-box shadow-box padding-box">
    <OperateCommon
      :showSearch="true"
      :showAdd="true"
      @search="initData"
      @add="edit(0)"
    >
    </OperateCommon>
    <div class="table-wrapper">
      <el-table
        :data="tableData"
        row-key="id"
        :tree-props="{
          children: 'children',
        }"
        :expand-row-keys="expands"
        border
        stripe
      >
        <el-table-column
          v-for="(col, index) in columns"
          :prop="col.prop"
          :key="index"
          :label="col.label"
          :width="col.width"
          :min-width="col.minWidth"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)"
              >详情</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="deleteConfirm(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <MenuDialog
      :visible.sync="visible"
      :menuTree="tableData"
      :current="current"
      @refresh="initData"
    ></MenuDialog>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import LinkTo from "@/mixins/LinkTo";
import { deleteMenu, getMenuTree } from "@/api/System/Menu";
import MenuDialog from "./Details.vue";
import commonList from "@/mixins/commonList";
export default {
  mixins: [LinkTo, commonList],
  components: { OperateCommon, MenuDialog },
  data() {
    return {
      columns: columns,
      tableData: [],
      count: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        parent_id: "",
        dept_name: "",
      },
      expands: [],
      visible: false,
      current: null,
    };
  },
  methods: {
    initData() {
      getMenuTree().then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          this.count = res.num;
        }
      });
    },
    pageChange(val) {
      this.queryParams.pageNum = val.pageNum;
      this.queryParams.pageSize = val.pageSize;
      this.initData();
    },
    deleteConfirm(id) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deleteItem(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteItem(id) {
      deleteMenu({ id: id }).then((res) => {
        if (res.code == 0) {
          this.$message.success("删除成功");
          this.initData();
        }
      });
    },
    edit(current) {
      if (current == 0) {
        this.current = {
          id: "",
          menu_name: "",
          parent_id: 0,
          link_url: "",
          img_url: "",
          menu_sort: "",
          Component: "",
          state: "0",
          menu_type: "2",
        };
      } else {
        this.current = current;
      }
      this.visible = true;
    },
  },
  created() {
    this.initData();
  },
};

const columns = [
  {
    prop: "menu_name",
    label: "菜单名称",
    width: "",
    minWidth: "200",
    align: "",
  },
  {
    prop: "menu_sort",
    label: "菜单排序",
    width: "200",
    minWidth: "",
    align: "",
  },
];
</script>

<style lang="scss" scoped>
</style>